<template>
  <div class="middle">
    <div class="box">
      <div class="container">
        <div class="common_header">
          <div class="h_left">
            <h3 class="name">{{ floorData.title }}</h3>
          </div>
          <div class="h_right">
            <div class="subCateList">
              <span v-for="(item, index) in floorData.tabList" :key="item.id">
                <b v-if="index !== 0">/</b>
                <a>{{ item.title }}</a>
              </span>
            </div>
            <div class="more"><a href="">查看更多></a></div>
          </div>
        </div>
        <div class="common_img">
          <img :src="floorData.imgUrl" alt="" />
        </div>
        <div class="common_list">
          <div class="show_right">
            <div
              class="show_right_item"
              v-for="good in floorData.goodItems"
              :key="good.id"
              :data-id="good.id"
            >
              <div class="item_img">
                <img :src="good.defalutImgUrl" alt="" class="on_img" />
                <div class="hover_on">
                  <img :src="good.hoverImgUrl" :data-id="good.id" alt="" class="hover-img" />
                </div>
              </div>

              <div class="item_word">
                <h4 class="name">
                  <span><a :data-id="good.id">{{ good.title }}</a></span>
                </h4>
                <p class="price">
                  <span class="price_red">￥{{ good.discountPrice }}</span>
                  <span class="price_black">￥{{ good.defaultPrice }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "WClassify",
};
</script>

<script lang="ts" setup>
import {  computed } from "vue";
import { defineProps } from "vue";
const floor = defineProps(["floor"]);

const floorData = computed(() => {
  return floor.floor;
});
</script>

<style scoped lang="less">
.middle {
  width: 100%;
  .box {
    width: 1090px;
    height: 789px;
    // background-color: antiquewhite;
    margin: 0 auto;
    .common_header {
      width: 100%;
      height: 28px;
      padding-bottom: 20px;
      // background-color: pink;
      display: flex;
      justify-content: space-between;
      .h_left {
        display: flex;
        h3 {
          margin-right: 20px;
          font-size: 28px;
          color: #333;
          font-weight: bold;
        }
      }
      .h_right {
        display: flex;

        .subCateList {
          padding-top: 14px;
          width: 592px;
          height: 14px;
          span {
            color: #333;
            font-size: 14px;
            cursor: pointer;

            b {
              margin: 0 13px;
            }
            a {
              color: #333;
              height: 14px;
            }
            .nomargin {
              margin: 0;
            }
          }
        }
        .more {
          // margin-right: 30px;
          padding-top: 16px;
          cursor: pointer;
          font-size: 14px;
          a {
            color: #333;
            height: 14px;
          }
        }
      }
    }
    .common_img {
      height: 1090px;
      height: 310px;
    }
    .common_list {
      height: 411px;
      width: 1090px;
      padding: 10px 10px 50px 0;
      .show_right {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .show_right_item {
          width: 265px;
          height: 361px;
          // background-color: yellow;
          margin-bottom: 10px;
          &:hover {
            background-color: antiquewhite;
          }
          .item_img {
            width: 265px;
            height: 265px;
            text-align: center;
            position: relative;
            .hover_on {
              position: absolute;
              top: 0px;
              // opacity: 0;
              cursor: pointer;
              &:hover {
                opacity: 0;
                // transform: scale(1.5);
              }
            }
          }
          .item_word {
            font-size: 13px;
            height: 92.67px;

            .name {
              color: #333;
              cursor: pointer;
              line-height: 20px;
              margin: 0 auto 4px;
              width: 166px;

              text-align: center;
              margin-top: 20px;
              span {
                font-weight: bold;
              }
              &:hover {
                color: burlywood;
              }
            }
            .price {
              margin: 0;
              padding: 1px 0 9px;
              line-height: 13px;
              text-align: center;
              height: 15px;
              // margin-top: 5px;
              .price_red {
                color: #d4282d;
                font-size: 13px;
              }
              .price_black {
                color: #999;
                font-size: 12px;
                text-decoration: line-through;
              }
            }
          }
        }
      }
    }
  }
}
</style>
